<template>
  <el-form class="pro-panels">
    <el-form-item label="目标对象">
      <div class="mb-2 flex items-center text-sm">
        <el-radio-group v-model="stageStore.layerEventActionData.type" class="ml-4">
          <el-radio
            v-for="item in ActionTypeOptions"
            :key="item.value"
            :label="item.value"
            size="large"
          >
            {{ item.label }}
          </el-radio>
        </el-radio-group>
      </div>
    </el-form-item>
    <el-form-item label="">
      <el-select v-model="stageStore.layerEventActionData.target" placeholder="请选择" size="large">
        <el-option
          v-for="layer in stageStore.layers"
          :key="layer.id"
          :label="layer.title"
          :value="layer.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="剖切参数" class="horizontal">
      <SvgIcon icon-class="ic_重置" @click="reset" style="justify-content: flex-end" />
    </el-form-item>
    <el-form-item label="X轴">
      <div style="width: 65%">
        <el-slider
          v-model="stageStore.layerEventActionData.value.scaleConfig['X'][1]"
          :min="0"
          :max="100"
          :step="1"
          :show-tooltip="false"
        />
      </div>
      <div class="axis-value-control">
        <el-input-number
          v-model="stageStore.layerEventActionData.value.scaleConfig['X'][1]"
          :controls="false"
          :min="0"
          :max="100"
        >
          <template #append>%</template>
        </el-input-number>
      </div>
    </el-form-item>
    <el-form-item label="-X轴">
      <div style="width: 65%">
        <el-slider
          v-model="stageStore.layerEventActionData.value.scaleConfig['-X'][1]"
          :min="0"
          :max="100"
          :step="1"
          :show-tooltip="false"
        />
      </div>
      <div class="axis-value-control">
        <el-input-number
          v-model="stageStore.layerEventActionData.value.scaleConfig['-X'][1]"
          :controls="false"
          :min="0"
          :max="100"
        >
          <template #append> % </template>
        </el-input-number>
      </div>
    </el-form-item>
    <el-form-item label="Y轴">
      <div style="width: 65%">
        <el-slider
          v-model="stageStore.layerEventActionData.value.scaleConfig['Y'][1]"
          :min="0"
          :max="100"
          :step="1"
          :show-tooltip="false"
        />
      </div>
      <div class="axis-value-control">
        <el-input-number
          v-model="stageStore.layerEventActionData.value.scaleConfig['Y'][1]"
          :controls="false"
          :min="0"
          :max="100"
        >
          <template #append> % </template>
        </el-input-number>
      </div>
    </el-form-item>
    <el-form-item label="-Y轴">
      <div style="width: 65%">
        <el-slider
          v-model="stageStore.layerEventActionData.value.scaleConfig['-Y'][1]"
          :min="0"
          :max="100"
          :step="1"
          :show-tooltip="false"
        />
      </div>
      <div class="axis-value-control">
        <el-input-number
          v-model="stageStore.layerEventActionData.value.scaleConfig['-Y'][1]"
          :controls="false"
          :min="0"
          :max="100"
        >
          <template #append> % </template>
        </el-input-number>
      </div>
    </el-form-item>

    <el-form-item label="Z轴">
      <div style="width: 65%">
        <el-slider
          v-model="stageStore.layerEventActionData.value.scaleConfig['Z'][1]"
          :min="0"
          :max="100"
          :step="1"
          :show-tooltip="false"
        />
      </div>
      <div class="axis-value-control">
        <el-input-number
          v-model="stageStore.layerEventActionData.value.scaleConfig['Z'][1]"
          :controls="false"
          :min="0"
          :max="100"
        >
          <template #append> % </template>
        </el-input-number>
      </div>
    </el-form-item>
    <el-form-item label="-Z轴">
      <div style="width: 65%">
        <el-slider
          v-model="stageStore.layerEventActionData.value.scaleConfig['-Z'][1]"
          :min="0"
          :max="100"
          :step="1"
          :show-tooltip="false"
        />
      </div>
      <div class="axis-value-control">
        <el-input-number
          v-model="stageStore.layerEventActionData.value.scaleConfig['-Z'][1]"
          :controls="false"
          :min="0"
          :max="100"
        >
          <template #append> % </template>
        </el-input-number>
      </div>
    </el-form-item>
    <div class="action">
      <div class="action1">
        <el-form-item label="剖切速度">
          <el-select v-model="stageStore.layerEventActionData.value.rate" class="m-2">
            <el-option
              v-for="item in ClipSpeedOptions"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            />
          </el-select>
        </el-form-item>
      </div>
      <div class="action2">
        <el-form-item label="剖切效果">
          <el-select v-model="stageStore.layerEventActionData.value.easeType" class="m-2">
            <el-option
              v-for="item in EaseTypeOptions"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            />
          </el-select>
        </el-form-item>
      </div>
      <div class="action1">
        <el-form-item label="剖切次数">
          <el-select v-model="stageStore.layerEventActionData.value.times" class="m-2">
            <el-option
              v-for="item in ClipTimesOptions"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            />
          </el-select>
        </el-form-item>
      </div>
      <div class="action2">
        <el-form-item label="剖切延迟">
          <el-input-number
            v-model="stageStore.layerEventActionData.value.delay"
            placeholder="请输入"
            :controls="false"
          >
            <template #append>ms</template>
          </el-input-number>
        </el-form-item>
      </div>
    </div>
  </el-form>
</template>

<script lang="ts" setup>
import {
  ActionTypeOptions,
  ClipSpeedOptions,
  ClipTimesOptions,
  EaseTypeOptions,
} from '@/service/interaction/action/config';
import { useStageStore } from '@/store/stage';
import { cloneDeep } from 'lodash';

defineOptions({
  name: 'ActionGLTFClip',
});

const stageStore = useStageStore();

const { cimInstance } = window;
const currentClipModelId = ref('');
const cacheValue = ref<any>();

watch(
  () => stageStore.layerEventActionData,
  () => {
    update();
  },
  { deep: true }
);

onMounted(() => {
  init();
});

onBeforeUnmount(() => {
  if (currentClipModelId.value) {
    stopClip();
  }
});

const init = () => {
  const action = stageStore.layerEventActionData;
  cacheValue.value = cloneDeep(action.value);
  update();
};

const update = () => {
  if (!stageStore.layerEventActionData.id) {
    return;
  }
  const {
    target,
    value: { scaleConfig },
  } = stageStore.layerEventActionData;
  if (currentClipModelId.value !== target) {
    if (currentClipModelId.value) {
      stopClip();
    }
    currentClipModelId.value = target;
    startClip();
  }
  const tempScaleConfig: Record<string, any> = {};
  for (const key in scaleConfig) {
    if (!Array.isArray(scaleConfig[key])) {
      continue;
    }
    tempScaleConfig[key] = (scaleConfig[key][1] / 100) * 2;
  }
  cimInstance.api.updateLayerGraphics(currentClipModelId.value, {
    clip: tempScaleConfig,
  });
};

/**
 * 开始剖切
 * @param id
 */
const startClip = () => {
  cimInstance.api.clipModel({
    layerName: currentClipModelId.value,
    planeColor: '#FF00001A',
    edgeWidth: 1,
    edgeColor: [255, 255, 255, 0],
    unionClippingRegions: true,
    clipCenter: 'model_center',
    clipPlanePadding: 5,
  });
};

/**
 * 停止剖切
 * @param id
 */
const stopClip = () => {
  cimInstance.api.updateLayerGraphics(currentClipModelId.value, {
    clearClip: true,
  });
};

const reset = () => {
  stageStore.layerEventActionData.value = cloneDeep(cacheValue.value);
};
</script>

<style lang="less" scoped>
.action1,
.action2 {
  width: 45%;
  float: left;
}

.action2 {
  margin-left: 5%;
}

.svg-icon {
  font-size: 16px;
  color: #fff;
  background: #545454;
  &:hover {
    opacity: 0.8;
  }
}
:deep(.el-form-item) {
  .el-form-item__content {
    justify-content: space-between;
  }
}

.horizontal {
  flex-direction: row !important;

  :deep(.el-form-item__content) {
    justify-content: flex-end;
  }
}
.axis-value-control {
  width: 30%;
  :deep(.el-input-number) {
    .el-input__wrapper {
      position: relative;
      &::after {
        content: '%';
        position: absolute;
        right: 10px;
        top: 0;
        color: #fff;
      }
      .el-input__inner {
        padding-right: 20px;
      }
    }
  }
}
</style>
